<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

<script>
    
// 宏任务和微任务
// 宏任务：整体代码、计时器、ajax等
// 微任务：promise

// 不同的异步任务之间的执行优先级不一样
// 只考虑异步任务的情况下，优先执行微任务，然后再执行宏任务

console.log( 1 );
setTimeout(()=>{// f1 异步执行
    console.log( 2 );
},0);
Promise.resolve(3).then((res)=>{// f2 异步执行
    console.log( res );
});
console.log( 4 );
// 1 4 3 2

// 微任务队列：[f2]
// 宏任务队列：[f1]
// 执行栈：
// console.log( 1 );
// setTimeout() -> 给f1计时0毫秒，f1被加入宏任务队列
// Promise.resolve(3) -> 成功状态的Promise对象p1
// p1.then() f2符合执行条件，被加入微任务队列
// console.log( 4 );
// 此时，JS引擎空闲了，优先处理微任务队列
// f2()
    // console.log( res );// 3
// 此时，JS引擎空闲了，微任务队列已清空，开始处理宏任务队列
// f1()
    // console.log( 2 );


</script>
</body>
</html>